<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>01test</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style>
            #wrap div {
                width:200px;
                height:200px;
                border:1px solid #ccc;
                display:none;
            }
            .active {
                background:red;
            }
        </style>
        <script>
            window.onload = function () {
                var oDiv = document.getElementById("wrap");
                var aInt = oDiv.getElementsByTagName("input");
                var aD = oDiv.getElementsByTagName("div");
                
                for(var i=0; i<aInt.length; i++) {
                    aInt[i].index = i;
                    aInt[i].onclick = function () {
                        for(var i=0; i<aInt.length; i++) {
                            aInt[i].className = "";
                            aD[i].style.display = "none";
                        }
                        
                        this.className = "active";
                        aD[this.index].style.display = "block";
                        
                    }
                    
                }
            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <input type="button" value="1"/>
            <input type="button" value="2"/>
            <input type="button" value="3"/>
            <div>11111</div>
            <div>22222</div>
            <div>33333</div>
        </div>
    </body>
    <script>
        
    </script>
</html>